<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ page session="false"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Athenaeum : Profile</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<jsp:include page="../assets/header.jsp" />

</head>
<body>
	<jsp:include page="../assets/navbar-top.jsp" />
	<div class="page-wrap">
		<div class="container-fluid">
			<div class="row row-wrap">
				<div class="col-md-3">
					<jsp:include page="sidebar.jsp" />
					<div class="page-sub-header">
						<h3>Recommended for you</h3>
					</div>
					<div class="list-group">
						<a href="#experience" id="a-experience" class="list-group-item">
							Experience </a> <a href="#" class="list-group-item">Dapibus ac
							facilisis in</a> <a href="#" class="list-group-item">Morbi leo
							risus</a> <a href="#" class="list-group-item">Porta ac
							consectetur ac</a> <a href="#" class="list-group-item">Vestibulum
							at eros</a>
					</div>

				</div>
				<div class="col-md-9">
					<div class="row">
						<div class="col-md-3">
							<a href="#" class="thumbnail"> <img
								data-src="holder.js/100%x180" alt="Add Photo">
							</a>
						</div>
						<div class="col-md-9">
							<h3>${user.fullName}</h3>
						</div>
					</div>
					<div id="experience-panel" class="row">
						<div class="col-md-12">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h3 class="panel-title">
										Experience <a id="addPosition" href="#"><i
											class="fa fa-plus fa-fw pull-right"></i></a>
									</h3>
								</div>
								<div class="panel-body">
									<div id="addPositionForm">
										<form:form modelAttribute="experience" role="form"
											action="${pageContext.request.contextPath}/settings/profile/experience/save">
											<form:hidden path="id" />
											<div class="col-md-8">
												<div class="form-group">
													<label for="company">Company Name</label>
													<form:input type="text" class="form-control" id="company"
														path="company" placeholder="Company Name" />
												</div>
												<div class="form-group">
													<label for="title">Title</label>
													<form:input type="text" class="form-control" id="title"
														path="title" placeholder="Title" />
												</div>
												<div class="form-group">
													<label for="location">Location</label>
													<form:input type="text" class="form-control" id="location"
														path="location" placeholder="Location" />
												</div>
												<div class="form-group">
													<label for="description">Description</label>
													<form:input type="text" class="form-control"
														id="description" path="description"
														placeholder="Short Description for this position" />
												</div>
												<button type="submit" class="btn btn-primary">Add
													Position</button>
												&nbsp; &nbsp; &nbsp; <a id="cancel" class="btn btn-primary">Cancel
												</a>
											</div>
											<div class="col-md-4"></div>
										</form:form>
									</div>
									<c:if test="${not empty experiences}">
										<div class="row">
											<div class="col-md-12">
												<table class="table table-striped" id="experiences"
													style="width: '100%'">
													<thead>
														<tr>
															<th>Title</th>
															<th>Description</th>
															<th>Company</th>
															<th>Location</th>
															<th>Actions</th>
														</tr>
													</thead>
													<tbody>
														<c:forEach var="experience" items="${experiences}">
															<tr>
																<td><a href="${pageContext.request.contextPath}/">${experience.title}</a></td>
																<td>${experience.description}</td>
																<td>${experience.company}</td>
																<td>${experience.location}</td>
																<td><a href="${pageContext.request.contextPath}/">View
																		Team</a> | <a href="${pageContext.request.contextPath}/">Delete</a></td>
															</tr>
														</c:forEach>
													</tbody>
												</table>
											</div>
										</div>
									</c:if>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<jsp:include page="../assets/footer.jsp" />
	<script type="text/javascript">
		$(document).ready(function() {
			$("#addPositionForm").hide();

			$("#a-experience").click(function() {
				$("#experience").show();
			});

			$("#addPosition").click(function() {
				$("#addPositionForm").show();
			});

			$("#cancel").click(function() {
				$("#addPositionForm").hide();
			});

			$('#experiences').dataTable({
				"bLengthChange" : false,
			});
		});
	</script>
</body>
</html>

